一、Flex 基础概念
概念：Flexbox 是一维布局的王牌，用于在一行或一列中排列元素。
容器：设置
项目：容器的直接子元素。
主轴：项目排列的方向（默认水平）。
交叉轴：与主轴垂直的方向（默认垂直）。
容器：设置
display: flex 的元素。项目：容器的直接子元素。
主轴：项目排列的方向（默认水平）。
交叉轴：与主轴垂直的方向（默认垂直）。
👇 最简单的 Flex 布局
1
2
3
1/* 容器设置 */
2.container {
3 display: flex;
4 gap: 10px;
5}
6
7/* 项目会自动排列在一行 */
二、flex-direction（主轴方向）
概念：
常用值：
flex-direction 定义主轴方向，决定项目如何排列。常用值：
row — 水平排列（默认）row-reverse — 水平反向排列column — 垂直排列
👇 flex-direction 不同值
row（默认）
1
2
3
row-reverse
1
2
3
column
1
2
3
1/* 水平排列（默认） */
2.container {
3 display: flex;
4 flex-direction: row;
5}
6
7/* 水平反向 */
8.container {
9 flex-direction: row-reverse;
10}
11
12/* 垂直排列 */
13.container {
14 flex-direction: column;
15}
三、justify-content（主轴对齐）
概念：
常用值：
justify-content 控制项目在主轴上的对齐方式。常用值：
flex-start — 左对齐（默认）center — 居中space-between — 两端对齐space-around — 等间距
👇 justify-content 不同值
flex-start（默认）
1
2
3
center
1
2
3
space-between
1
2
3
space-around
1
2
3
1/* 左对齐（默认） */
2.container {
3 justify-content: flex-start;
4}
5
6/* 居中 */
7.container {
8 justify-content: center;
9}
10
11/* 两端对齐 */
12.container {
13 justify-content: space-between;
14}
15
16/* 等间距 */
17.container {
18 justify-content: space-around;
19}
四、align-items（交叉轴对齐）
概念：
常用值：
align-items 控制项目在交叉轴上的对齐方式。常用值：
stretch — 拉伸（默认）center — 居中flex-start — 顶部对齐flex-end — 底部对齐
👇 align-items 不同值
stretch（默认）
1
2
3
center
1
2
3
flex-start
1
2
3
1/* 拉伸（默认） */
2.container {
3 align-items: stretch;
4}
5
6/* 居中 */
7.container {
8 align-items: center;
9}
10
11/* 顶部对齐 */
12.container {
13 align-items: flex-start;
14}
15
16/* 底部对齐 */
17.container {
18 align-items: flex-end;
19}
五、gap（间距）
概念：
语法：
常用场景：替代 margin，避免外边距合并问题。
gap 设置项目之间的间距，比 margin 更方便。语法：
gap: 行间距 列间距;常用场景：替代 margin，避免外边距合并问题。
👇 gap 演示
1
2
3
1/* 统一间距 */
2.container {
3 gap: 20px;
4}
5
6/* 行列分别设置 */
7.container {
8 row-gap: 20px;
9 column-gap: 10px;
10}
六、flex-wrap（换行）
概念：
常用值：
flex-wrap 控制项目是否换行。常用值：
nowrap — 不换行（默认），项目会压缩wrap — 换行，项目保持原始尺寸
👇 flex-wrap 对比
nowrap（默认）
1
2
3
4
wrap
1
2
3
4
1/* 不换行（默认） */
2.container {
3 flex-wrap: nowrap;
4}
5
6/* 换行 */
7.container {
8 flex-wrap: wrap;
9}
七、flex-grow（放大比例）
概念：
语法：
常用场景：让某些项目占据更多剩余空间。
flex-grow 定义项目的放大比例，默认为 0（不放大）。语法：
flex-grow: 数值;常用场景：让某些项目占据更多剩余空间。
👇 flex-grow 演示
flex-grow: 1
flex-grow: 2
默认
1/* 放大比例 */
2.item-1 { flex-grow: 1; }
3.item-2 { flex-grow: 2; } /* 占据更多空间 */
4.item-3 { flex-grow: 0; } /* 默认，不放大 */
八、flex-shrink（缩小比例）
概念：
语法：
常用场景：防止某些项目被压缩。
flex-shrink 定义项目的缩小比例，默认为 1（空间不足时会缩小）。语法：
flex-shrink: 0; — 不缩小常用场景：防止某些项目被压缩。
👇 flex-shrink 演示
不缩小
缩小
缩小
1/* 不缩小 */
2.item-1 { flex-shrink: 0; }
3
4/* 默认缩小 */
5.item-2 { flex-shrink: 1; }
九、flex-basis（初始大小）
概念：
语法：
对比：
flex-basis 设置项目在分配多余空间前的初始大小。语法：
flex-basis: 长度;对比：
flex-basis 优先于 width。
👇 flex-basis 演示
200px
100px
自动
1/* 初始大小 */
2.item-1 { flex-basis: 200px; }
3.item-2 { flex-basis: 100px; }
4.item-3 { flex-basis: auto; } /* 默认 */
十、flex 复合属性
概念：
语法：
常用值：
flex 是 flex-grow、flex-shrink、flex-basis 的简写。语法：
flex: grow shrink basis;常用值：
flex: 1; 等同于 flex: 1 1 0%;
👇 flex 复合属性演示
flex: 1
flex: 2
默认
1/* 复合属性 */
2.item-1 { flex: 1; } /* flex: 1 1 0% */
3.item-2 { flex: 2; } /* flex: 2 1 0% */
4.item-3 { flex: none; } /* flex: 0 0 auto */
十一、order（排序）
概念：
默认值：0
常用场景：不改变 HTML 结构，调整视觉顺序。
order 定义项目的排列顺序，数值越小越靠前。默认值：0
常用场景：不改变 HTML 结构，调整视觉顺序。
👇 order 演示
order: 3
order: 1
order: 2
1/* 排序 */
2.item-1 { order: 3; } /* 最后 */
3.item-2 { order: 1; } /* 第一 */
4.item-3 { order: 2; } /* 第二 */
十二、align-self（单独对齐）
概念：
常用值：
对比：
align-self 允许单个项目与其他项目不同的对齐方式。常用值：
auto、center、flex-start、flex-end对比：
align-items 设置容器，align-self 覆盖单个项目。
👇 align-self 演示
默认
align-self: center
align-self: flex-end
1/* 单独对齐 */
2.item-1 { align-self: auto; }
3.item-2 { align-self: center; }
4.item-3 { align-self: flex-end; }
十三、align-content（多行对齐）
概念：
前提：需要
常用值：
align-content 控制多行项目在交叉轴上的对齐方式。前提：需要
flex-wrap: wrap; 且容器有足够高度。常用值：
flex-start、center、space-between
👇 align-content 演示
flex-start
1
2
3
4
5
6
center
1
2
3
4
5
6
1/* 多行对齐 */
2.container {
3 display: flex;
4 flex-wrap: wrap;
5 align-content: center;
6 height: 200px;
7}